<template>
    <div class="layout-container">
        <div class="layout-container-table" v-loading="loading">
            <div class="box" ref="box">
                <el-scrollbar height="auto">
                    <el-row :gutter="20">

                        <el-col :xl="24 / 4" :lg="24 / 3" :sm="24 / 2" :xs="24 / 1" v-for="row in list" :key="row.task_id">
                            <el-card @click="handleEnterTask(row)" :body-style="{ padding: '0px' }" shadow="hover">
                                <div style="padding: 14px;">
                                    <el-row style="display: flex; justify-content: space-between; align-items: center;">
                                        {{ row.name }}
                                        <!-- 下面的两个button靠父组件的右边对齐 -->
                                        <CourseTag :status="row.status" style="margin-left: 5px;" />


                                        <div v-if="$store.state.user.is_teacher">
                                            <el-button type="danger" circle @click.stop="handleTeacherDeleteTask(row)">
                                                <svg t="1713084447474" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                    xmlns="http://www.w3.org/2000/svg" p-id="5629" width="15" height="15">
                                                    <path
                                                        d="M853.333333 192v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-640a21.333333 21.333333 0 0 1-21.333333-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333333-21.333333H384V128a42.666667 42.666667 0 0 1 42.666667-42.666667h170.666666a42.666667 42.666667 0 0 1 42.666667 42.666667v42.666667h192a21.333333 21.333333 0 0 1 21.333333 21.333333zM250.453333 859.306667a85.333333 85.333333 0 0 0 85.333334 79.36h353.28a85.333333 85.333333 0 0 0 85.333333-79.36L810.666667 341.333333H213.333333z"
                                                        p-id="5630" fill="#ffffff"></path>
                                                </svg>
                                            </el-button>
                                        </div>
                                    </el-row>

                                    <el-row class="time" style="margin-top: 10px;">
                                        开始时间：
                                        <time>{{ row.start_time }}</time>
                                    </el-row>

                                    <el-row class="time" style="margin-top: 10px;">
                                        结束时间：
                                        <time>{{ row.end_time }}</time>
                                    </el-row>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                    <el-empty description="空空如也~" :image-size="100" style="height: 160px;"
                        v-show="list.length === 0"></el-empty>
                </el-scrollbar>
            </div>
        </div>

    </div>
</template>

<script lang="ts" >
import type { Ref } from 'vue'
import { defineComponent, ref } from 'vue'
import { getMyTaskListApi } from '@/api/task'
import { deleteTaskApi } from '@/api/course'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import CourseTag from '@/views/main/public/publicKit/tag_course.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

export default defineComponent({
    props: {
        course_id: {
            type: Number,
            default: '',
            required: true,
        },
        task_type: {
            type: String,
            default: '',
            required: true,
        }
    },

    components: {
        CourseTag,
    },
    setup(props) {



        const router = useRouter()
        const store = useStore()
        let loading = ref(true)
        let list: Ref<{
            task_id: string,
            task_type: string,
            name: string,
            start_time: string,
            end_time: string,
            status: string,
            description: string,
            score: number,


        }[]> = ref([])

        let box: Ref<HTMLDivElement> = ref() as any


        const getListData = async (init:boolean) => {
            loading.value = true;
            const exam_ongoing = ref(false);
            let params = {
                task_type: props.task_type,
                course_id: props.course_id,
                user_id: store.state.user.user_id,
                is_teacher: store.state.user.is_teacher,
            };

            if (list.value.length === 0 || init) {
                try {
                    const res = await getMyTaskListApi(params);
                    console.log("1 getMyTaskListApi exams_ongoing:", res.data.exam_ongoing);
                    list.value = res.data.task_list;
                    exam_ongoing.value = res.data.exam_ongoing;
                } catch (err) {
                    list.value = [];
                } finally {
                    loading.value = false;
                }
            }
            console.log("3 return exam_ongoing:", exam_ongoing.value);
            return exam_ongoing.value;
        };


        const handleTeacherDeleteTask = (row: any) => {

            ElMessageBox.prompt('请输入任务名称确认删除(学生之前提交的作业记录也会删除)', '删除提示', {
                confirmButtonText: '删除',
                confirmButtonClass: 'el-button--danger',
                cancelButtonText: '取消',
                type: 'warning',

            })
                .then(({ value }) => {
                    if (value === row.name) {

                        const form = ref({
                            task_id: row.task_id,
                            user_id: store.state.user.user_id,
                            is_teacher: store.state.user.is_teacher,
                            course_id: props.course_id,
                        })
                        deleteTaskApi(form.value).then((res: any) => {
                            if (res.code === 200) {
                                ElMessage({
                                    type: 'success',
                                    message: '删除成功',
                                })
                                location.reload()
                            } else {
                                ElMessage({
                                    type: 'error',
                                    message: res.msg,
                                })
                            }
                        })
                    } else {
                        ElMessage({
                            type: 'error',
                            message: '输入的作业名称不正确',
                        })
                    }
                }).catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '取消删除',
                    })
                })
        }
        // 点击课程，跳转到课程详情页面
        const handleEnterTask = (row: any) => {
            const btnDisabled = ref(false)
            if (row.status !== 'ongoing' || row.status !== '正在进行') {
                btnDisabled.value = true
            }

            if (store.state.user.is_teacher)
                router.push({ name: 'teacherTaskInfo', state: { course_id: props.course_id, task_id: row.task_id, task_type: props.task_type, btnDisabled: btnDisabled.value } })
            else
                router.push({ name: 'studentTaskInfo', state: { course_id: props.course_id, task_id: row.task_id, task_type: props.task_type, btnDisabled: btnDisabled.value } })
        }


        return {
            loading,
            list,
            box,
            handleTeacherDeleteTask,
            handleEnterTask,
            getListData,
        }
    }
})
</script>

<style lang="scss" scoped>
* {
    text-align: left;
}

.box {
    height: calc(100% - 50px);

    margin-bottom: 15px;

    :deep(.is-horizontal) {
        display: none;
    }
}

.time {
    font-size: 13px;
    color: #999;
}
</style>